<template>
  <el-container
      @dragover.prevent
      @dragstart="listenDragstart"
      @dragenter="listenDragEnter"
      @drop="listenDrop"
  >
    <el-aside width="15%">
      <Aside></Aside>
    </el-aside>
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-main>
        <div class="layout">

          <div class="layout-item-header">
            <span style="color: #909399;" v-if="selectFileMap.length <= 0">分享文件（超过一年的分享链接将会被清除）</span>
            <span v-else>
              <el-button type="primary" icon="el-icon-link" @click="copy">复制链接</el-button>
              <el-button type="danger" icon="el-icon-circle-close" @click="cancelShare()">取消分享</el-button>
            </span>
          </div>

          <div class="layout-item-content">
            <el-table
                ref="shareTable"
                :data="shareList"
                tooltip-effect="dark"
                max-height="700"
                style="width: 80%"
                highlight-current-row
                load="loading"
            >
              <el-table-column label="选择" align="center" width="65">
                <template #default="scope">
                  <el-radio :label="scope.$index" v-model="selectRowIndex"
                            @change.native="getCurrentRow(scope.row)">&nbsp;
                  </el-radio>
                </template>
              </el-table-column>
              <el-table-column
                  width="75"
              >
                <template #default="scope">
                  <img :src="require('@/assets/images/type/'+scope.row.type+'.png')" alt="" style="width: 100%;">
                </template>
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="分享文件">
              </el-table-column>
              <el-table-column
                  prop="create_time"
                  label="分享时间">
              </el-table-column>
              <el-table-column
                  label="状态">
                <template #default="scope">
                  <span v-if="scope.row.surplus_time == 0">
                    <el-tag type="info">永久有效</el-tag>
                  </span>
                  <span v-else>
                    <el-tag type="info" v-if="scope.row.status == 1">{{ scope.row.surplus_time }}天后过期</el-tag>
                    <el-tag type="danger" v-else>分享失效</el-tag>
                  </span>
                </template>
              </el-table-column>
            </el-table>

            <div class="shareinfo">
              <div class="result" v-if="selectFileMap.length != 0">
                <div class="title">分享详情</div>
                <div class="info">
                  <div class="item">
                    <img :src="require('@/assets/images/type/'+selectFileMap.type+'.png')" alt="" style="width: 14px;"/>
                    <span class="name"><strong>{{ selectFileMap.name }}</strong></span>
                  </div>
                  <div class="item">
                    分享时间：{{ selectFileMap.create_time }}
                  </div>
                  <div class="item">
                    有效期：<span v-if="selectFileMap.surplus_time == 0">
                    <el-tag type="success">永久有效</el-tag>
                  </span>
                    <span v-else>
                    <el-tag v-if="selectFileMap.status == 1">{{ selectFileMap.surplus_time }}天后过期</el-tag>
                    <el-tag type="danger" v-else>分享失效</el-tag>
                  </span>
                  </div>
                  <div class="item">
                    提取码：{{ selectFileMap.passwd }}
                  </div>
                </div>
                <div class="info">
                  <div class="item">浏览次数：{{ selectFileMap.log.visit }}次</div>
                  <div class="item">下载次数：{{ selectFileMap.log.download }}次</div>
                  <div class="item">保存次数：{{ selectFileMap.log.save }}次</div>
                </div>
              </div>
              <div class="empty" v-else>
                <div class="title">分享详情</div>
                <el-empty :image="require('@/assets/images/type/floder.png')" description="无内容"></el-empty>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Aside from "../components/ShareAside";
import Header from "../components/Header";

export default {
  name: "Share",
  components: {
    Aside,
    Header
  },
  data() {
    return {
      shareList: [],
      selectFileMap: [],
      selectRowIndex: '',
      loading:true
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      var that = this;
      that.loading = true;
      that.$axios.get('share/list').then(res => {
        if (res.data.code == 1) {
          that.loading = false;
          that.shareList = res.data.data;
        }
      });
    },
    getCurrentRow(checked) {
      console.log(checked);
      if (checked == this.selectFileMap) {
        this.selectFileMap = {};
        this.selectRowIndex = '';
      } else {
        this.selectFileMap = checked;
      }
    },
    copy() {
      let value = '分享链接：' + window.location.protocol + "//" + window.location.host + '/s/' + this.selectFileMap.flag + '   访问密码：' + this.selectFileMap.passwd;
      var cInput = document.createElement("input");
      cInput.value = value;
      document.body.appendChild(cInput);
      cInput.select();
      document.execCommand("copy");

      this.$message({
        type: "success",
        message: "链接已成功复制到剪切板"
      });
      // 复制成功后再将构造的标签 移除
      document.body.removeChild(cInput);
    },
    cancelShare() {
      var that = this;
      that.$axios.post('share/cancel', {
        flag: that.selectFileMap.flag
      }).then(res => {
        if (res.data.code == 1) {
          this.selectFileMap = {};
          this.init();
        }
      });

    }
  }
}
</script>

<style scoped>
.el-header {
  color: #333;
  text-align: center;
  line-height: 60px;
  border-bottom: 1px solid #e6e6e6;
}

.el-aside {
  display: block;
  text-align: center;
  height: calc(100vh);
}

.el-main {
  background-color: #f7f7f7;
  /*background-color: #000;*/
}

.layout {
  width: 99%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: nowrap;
}

.layout .layout-item-top {
  width: 100%;
  padding: 10px;
  background-color: #FFFFFF;
}

.layout .layout-item-header {
  width: calc(100% - 20px);;
  margin: 10px 0;
  padding: 20px;
  background-color: #FFFFFF;

}

.layout .layout-item-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: calc(100% - 40px);
  padding: 30px;
  background-color: #FFFFFF;
  height: 71vh;
}

.shareinfo {
  width: 18%;
  height: 80vh;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.empty {
  padding: 10px;
}

.empty .title {
  color: #606266;
  padding: 20px;
  border-bottom: 1px solid #E4E7ED;
}

.result {
  padding: 10px;
}

.result .title {
  color: #606266;
  padding: 20px;
  border-bottom: 1px solid #E4E7ED;
}

.result .info .item {
  padding: 10px;
  color: #606266;
  font-size: 15px;
}

.result .info {
  border-bottom: 1px solid #E4E7ED;

}
</style>